<template>
  <div>
    <div class="teach-title">
    <p>师资力量</p>
    <span></span>
    </div>
    <div class="teach-container">
        <div class="teach-picture" >
            <img :src="currentTeachObj.img" alt="">
        </div>
        <div class="teach-info">
            <div class="teach-name">{{currentTeachObj.name || ''}}</div>
            <div class="teach-job">{{currentTeachObj.position || ''}}</div>
            <span></span>
            <div class="teach-describe">{{currentTeachObj.descript || ''}}</div>
        </div>
    </div>
    <div class="teach-swiper">
        <div class="swiper-btn" @click='toLeft'><span><i class="icon-zuojiantou"></i></span></div>
        <div class="teach-list">
            <div class="list-content" style="left: 0px;">
                <div class="teach-item" v-for="(item,key) in teachList" :key="key+'teachList'" :style="{left: key*180+'px',backgroundImage: 'url('+item.img+')'}"
                 :class="[showTeachMain===key? '':(key == currentTeach ? '': 'teachMatte')]" @mouseenter='handelEnter(key)' @mouseleave='handelLeave()' @click='handelClick(key)'>
                    <div class="teach-main" v-show="showTeachMain===key">
                        <div class="teach-main-name">{{item.name}}</div>
                        <div class="teach-main-hr"></div>
                        <div class="teach-main-job">{{item.position}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-btn" @click='toRight'><span><i class="icon-youjiantou"></i></span></div>
    </div>
  </div>
</template>

<script>
import {getTeachList} from 'api/getData';

export default {

  data() {
    return {
        teachList:[],
        currentTeachObj:{},
        currentTeach: 0,
        showTeachMain: ''
    }
  },
  computed: {
    
  },
  created() {
    getTeachList().then(res=>{
        this.currentTeachObj = res[0]
        this.teachList = res
    })
  },
  mounted() {

  },
  methods: {
    toLeft(){
        let backups = this.teachList.slice(0)
        let del = backups.shift()
        backups.push(del)
        if(this.currentTeach == 0){
            this.currentTeach = this.teachList.length-1
        }else{
            this.currentTeach -=1
        }
        this.teachList = backups
    },
    toRight(){
        let backups = this.teachList.slice(0)
        let del = backups.pop()
        backups.unshift(del)
        if(this.currentTeach == this.teachList.length-1){
            this.currentTeach = 0
        }else{
            this.currentTeach +=1
        }
        this.teachList = backups
    },
    handelEnter(key){
        this.showTeachMain = key
    },
    handelLeave(){
        this.showTeachMain = ''
    },
    handelClick(key){
        this.currentTeachObj = this.teachList[key]
        this.currentTeach = key
    }
  }
};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.teach-title{
    padding-bottom: 30px;
    p{
        font-size: 40px;
        color: #202020;
        font-weight: bold;
    }
    span{
        display: block;
        width: 44px;
        height: 6px;
        border-radius: 3px;
        margin-top: 12px;
        background-color: #ff6252;
    }
}
.teach-container{
    font-size: 0;
    margin-bottom: 60px;
    >div{
        display: inline-block;
        vertical-align: top;
    }
    .teach-picture{
        width:312px;
        max-height:380px;
        margin-right: 60px;
        background-size: auto;
        background-position: 50%;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .teach-info{
        box-sizing: border-box;
        padding-top: 50px;
        >span{
            display: block;
            width:160px;
            height:2px;
            background:rgba(255,98,82,1);
        }
        .teach-name{
            font-size:26px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(32,32,32,1);
            margin-bottom: 14px;
        }
        .teach-job{
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(164,164,164,1);
            margin-bottom: 16px;
        }
        .teach-describe{
            margin-top: 31px;
            max-width: 825px;
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(118,118,118,1);
            line-height:30px;
        }
    }
    
}
.teach-swiper{
    font-size: 0;
    >div{
        vertical-align: top;
        display: inline-block;
    }
   .swiper-btn{
       margin-top: 51px;
       cursor: pointer;
       span{
            display: block;
            width: 40px;
            height: 40px;
            position: relative;
            background:rgba(244,244,244,1);
            border-radius:50%;
            &:hover{
                :before{
                    color: #FFFFFF;
                }
                background:rgba(255,98,82,1);
            }
       }
       i{
            font-size: 19px;
            position: absolute;
            font-weight: bold;
            top: 10px;
            
       }
       .icon-zuojiantou{
           left: 13px; 
       }
       .icon-youjiantou{
           left: 15px; 
       }
   }
   .swiper-btn:first-child{
       margin-right: 39px;
   }
   .swiper-btn:last-child{
       margin-left: 39px;
   }
   .teach-list{
        height:142px;
        width: 1041px;
        position: relative;
        overflow: hidden;
        .list-content{
            position: absolute;
        }
   }
   .teach-item{
        width:142px;
        height:142px;
        position: absolute;
        top: 0;
        cursor: pointer;
        background-size: 142px auto;
        .teach-main{
            width:142px;
            height:142px;
            overflow: hidden;
            box-sizing: border-box;
            padding: 24px 14px 0 14px;
            background:rgba(255,98,82,1);
            .teach-main-name{
                font-size:16px;
                font-family:MicrosoftYaHei-Bold;
                font-weight:bold;
                color:rgba(255,255,255,1);
                margin-bottom: 10px;
            }
            .teach-main-hr{
                width:60px;
                height:2px;
                background:rgba(255,255,255,1);
                margin-bottom: 10px;
            }
            .teach-main-job{
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:20px;
            }
        }
   }
   .teachMatte:before{
        content: '';
        position: absolute;
        width:142px;
        height:142px;
        background:rgba(0,0,0,1);
        opacity:0.7;
   }
}

</style>
